<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <script src="https://unpkg.com/vue"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <commentbox @func="loadComments"></commentbox>
    <ul class="list-group">
        <li class="list-group-item" v-for="item in list" :key="item.id">
            <span class="badge">评论人：{{item.user}}</span>
            {{item.content}}
        </li>
    </ul>

</div>
<template id="tmpl">
    <div>
        <div class="form-group">
            <label for="">评论人：</label>
            <input type="text" class="form-control" v-model="user">
        </div>

        <div class="form-group">
            <label for="">评论内容：</label>
            <textarea type="text" class="form-control" v-model="content"></textarea>
        </div>

        <div class="form-group">
            <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
        </div>
    </div>
</template>
</body>
<script>
    var commentBox = {
        template: '#tmpl',
        data(){
            return{
                user: '',
                content: ''
            }
        },
        methods: {
            postComment(){
                // 分析
                // 1.评论数据存到localStorage， localStorage.setItem('cmts','');
                // 2.先组织出一个最新的评论数据对象
                // 3.把第二步得到的评论对象，保存到localStorage中：
                // 3.1 localStorage只支持字符串数据，所以要先调用JSON.stringify()
                // 3.2 在保存最新的评论数据之前，要先从localStorage获取之前的评论数据（string），转换为一个数组对象，然后再把最新的评论，push到这个数组
                // 3.3 如果获取到的localStorage中的评论字符串，为空不存在，则可以返回一个 '[]' 让JSON.parse去转换
                // 3.4 把最新的评论列表数组，再次调用JSON.stringify 转为数组字符串，然后调用localStorage.setItem()
                var comment  = {id: Date.now(), user: this.user};
                var list = JSON.parse(localStorage.getItem('cmts') || '[]');
                list.unshift(comment);
                localStorage.setItem('cmts', JSON.stringify(list));
                this.user = this.content = '';
                this.$emit('func');
            }

        }

    };


var vm = new Vue({
    el: '#app',
    data: {
        msg: '大家好哈哈哈哈，你们好啊。',
        list: [
            {id: Date.now(), user: '李白', content: '天生我材必有用'},
            {id: Date.now(), user: '江小白', content: '天生我材必有用'},
            {id: Date.now(), user: '白居易', content: '哈哈哈哈哈白居易'},
        ]
    },
    created(){
        this.loadComments();
    },
    methods:{
        loadComments(){ // 从本地的localStorage中，加载列表
            var list = JSON.parse(localStorage.getItem('cmts') || '[]');
            this.list = list;
        }

    },
    components:{
        commentbox: commentBox,
    }

})
</script>
</html>